<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css white-space 规定如何处理元素中的空白</title>
</head>
<body>

    <p>
        这是一些文本。
          这是一些文本。
          这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>
    <h1>normal 默认。空白会被浏览器忽略。</h1>
    <p style="white-space: normal">
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>

    <h1>文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。</h1>
    <p style="white-space: nowrap">
        这是一些文本。
          这是一些文本。
          这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>

    <h1>空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。</h1>
    <p style="white-space: pre">
        这是一些文本。
          这是一些文本。
          这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>

    <h1>保留空白符序列，但是正常地进行换行。</h1>
    <p style="white-space: pre-wrap">
        这是一些文本。
          这是一些文本。
          这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>

    <h1>合并空白符序列，但是保留换行符。</h1>
    <p style="white-space: pre-line">
        这是一些文本。
         这是一些文本。
         这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
    </p>

</body>
</html>